<!-- 用户注册页面 - 提供用户注册功能，支持基本信息注册和表单验证 -->
<template>
  <div class="register-page">
    <!-- 统一导航栏组件 -->
    <AppHeader />

    <!-- 注册页面主要内容区域 -->
    <main class="register-container">
      <!-- 注册卡片容器 -->
      <div class="register-card">
        <!-- 语言选择器 - 支持多语言切换 -->
        <div class="language-selector">
          <el-select v-model="currentLanguage" placeholder="语言选择" size="small">
            <el-option label="中文简体" value="zh-CN" />
            <el-option label="English" value="en-US" />
          </el-select>
        </div>

        <!-- 注册表单区域 -->
        <div class="register-form">
          <!-- 示例数据提示 -->
          <div v-if="isUsingSampleData" class="sample-data-notice">
            <el-alert
              title="示例数据模式"
              description="后端服务暂时不可用，当前使用示例数据进行演示。"
              type="info"
              :closable="false"
              show-icon
            />
          </div>
          
          <!-- 表单标题 -->
          <h2 class="form-title">用户注册</h2>

          <!-- 昵称输入字段 -->
          <div class="form-group">
            <el-input v-model="registerForm.nickname" placeholder="昵称" size="large" :prefix-icon="User" />
          </div>

          <!-- 邮箱输入字段 -->
          <div class="form-group">
            <el-input v-model="registerForm.email" placeholder="邮箱" type="email" size="large" :prefix-icon="Message" />
          </div>

          <!-- 个人网站输入字段 -->
          <div class="form-group">
            <el-input v-model="registerForm.website" placeholder="个人网站" size="large" :prefix-icon="Link" />
          </div>

          <!-- 密码输入字段 -->
          <div class="form-group">
            <el-input v-model="registerForm.password" placeholder="密码" type="password" size="large" :prefix-icon="Lock"
              show-password />
          </div>

          <!-- 确认密码输入字段 -->
          <div class="form-group">
            <el-input v-model="registerForm.confirmPassword" placeholder="再次输入密码" type="password" size="large"
              :prefix-icon="Lock" show-password />
          </div>

          <!-- 注册按钮 -->
          <div class="form-group">
            <el-button type="primary" size="large" class="register-btn" :loading="isLoading" @click="handleRegister">
              用户注册
            </el-button>
          </div>

          <!-- 导航链接区域 -->
          <div class="nav-links">
            <!-- 返回首页链接 -->
            <router-link to="/" class="nav-link">返回首页</router-link>
            <span class="separator">·</span>
            <!-- 用户登录链接 -->
            <a href="#" class="nav-link" @click.prevent="navigateToLogin">用户登录</a>
          </div>
        </div>
      </div>
    </main>

    <!-- 统一页脚组件 -->
    <AppFooter />

    <!-- 页面切换动画组件 -->
    <PageTransition 
      v-if="showTransition" 
      :loading-text="transitionText" 
      :hint-text="transitionHint"
      :duration="1500"
    />
  </div>
</template>

<script setup lang="ts">
// ==================== 导入依赖 ====================

// Vue 3 组合式 API - 提供响应式数据管理
import { ref, reactive } from 'vue'
// Vue Router - 提供路由导航功能
import { useRouter } from 'vue-router'
// Element Plus 组件 - 用于消息提示
import { ElMessage } from 'element-plus'
// Element Plus 图标组件 - 用于界面图标显示
import { User, Message, Link, Lock } from '@element-plus/icons-vue'

// 自定义组件导入
import AppHeader from '../components/AppHeader.vue'  // 统一导航栏组件
import AppFooter from '../components/AppFooter.vue'  // 统一页脚组件
import PageTransition from '../components/PageTransition.vue' // 页面切换动画组件

// API工具导入
import { post, API_PATHS } from '../utils/api'

// ==================== 类型定义 ====================

// 注册请求数据接口
interface RegisterRequest {
    nickname: string
    email: string
    website?: string
    password: string
}

// 注册响应数据接口
interface RegisterData {
    success: boolean
    message: string
    data?: {
        userId: number
        email: string
        nickname: string
    }
}

// ==================== 路由和响应式数据 ====================

// 路由实例获取
const router = useRouter()  // 用于编程式导航

// 响应式数据定义
const currentLanguage = ref('zh-CN')  // 当前选择的语言，默认为中文简体
const isLoading = ref(false)          // 注册按钮的加载状态
const showTransition = ref(false)     // 控制页面切换动画的显示
const transitionText = ref('')        // 动画加载文本
const transitionHint = ref('')        // 动画提示文本
const isUsingSampleData = ref(false)  // 是否使用示例数据

// 注册表单数据对象
const registerForm = reactive({
    nickname: '',        // 用户昵称
    email: '',          // 用户邮箱
    website: '',        // 个人网站（可选）
    password: '',       // 用户密码
    confirmPassword: '' // 确认密码
})

// ==================== 示例数据 ====================

// 示例注册响应数据 - 当API调用失败时使用
const sampleRegisterData = {
    userId: 2001,
    email: 'demo@example.com',
    nickname: '演示用户'
}

// ==================== 方法函数 ====================

/**
 * 使用示例数据注册
 * @description 当API调用失败时，使用示例数据进行注册
 */
const useSampleData = () => {
    isUsingSampleData.value = true
    
    // 模拟注册成功
    ElMessage.success('注册成功（示例数据）！请登录')
    
    // 注册成功后跳转到登录页面
    router.push('/login')
}

/**
 * 处理用户注册
 * @description 验证用户输入并执行注册流程，包括表单验证、API调用和状态管理
 */
const handleRegister = async () => {
    // 验证昵称是否已填写
    if (!registerForm.nickname) {
        ElMessage.warning('请输入昵称')
        return
    }

    // 验证邮箱是否已填写
    if (!registerForm.email) {
        ElMessage.warning('请输入邮箱')
        return
    }

    // 验证邮箱格式
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (!emailRegex.test(registerForm.email)) {
        ElMessage.warning('请输入有效的邮箱地址')
        return
    }

    // 验证密码是否已填写
    if (!registerForm.password) {
        ElMessage.warning('请输入密码')
        return
    }

    // 验证两次输入的密码是否一致
    if (registerForm.password !== registerForm.confirmPassword) {
        ElMessage.warning('两次输入的密码不一致')
        return
    }

    // 验证密码长度是否符合要求
    if (registerForm.password.length < 6) {
        ElMessage.warning('密码长度至少6位')
        return
    }

    // 设置加载状态，防止重复提交
    isLoading.value = true

    try {
        // 准备注册请求数据
        const registerData: RegisterRequest = {
            nickname: registerForm.nickname,
            email: registerForm.email,
            website: registerForm.website || undefined,
            password: registerForm.password
        }

        // 调用后端注册API
        const response = await post<RegisterData>(API_PATHS.AUTH.REGISTER, registerData)

        if (response && response.success) {
            // 注册成功处理
            ElMessage.success('注册成功！请登录')
            
            // 注册成功后跳转到登录页面
            router.push('/login')
        } else {
            // API返回错误
            ElMessage.error(response?.message || '注册失败，请重试')
            console.error('注册失败:', response?.message)
        }
    } catch (error) {
        // 网络错误或API调用失败
        console.error('注册请求失败:', error)
        
        // 显示错误消息
        ElMessage.error('网络连接失败，请稍后重试')
        
        // 使用示例数据作为后备方案
        ElMessage.warning('后端服务暂时不可用，使用示例数据注册')
        useSampleData()
    } finally {
        // 重置加载状态
        isLoading.value = false
    }
}

/**
 * 导航到登录页面
 * @description 触发页面切换动画并导航到登录页面
 */
const navigateToLogin = () => {
    showTransition.value = true
    transitionText.value = '正在跳转...'
    transitionHint.value = '登录页面'
    setTimeout(() => {
        router.push('/login')
    }, 1000) // 动画持续时间
}
</script>

<style scoped lang="scss">
// 导入注册页组件样式
@use '../assets/styles/clients/_register';
</style>